<!--
 * @Description: GlobalHeader右侧布局
 * @Author: seadon
 * @LastEditors: seadon
 * @Date: 2021-07-09 16:06:30
 * @LastEditTime: 2022-03-29 15:43:44
-->
<template>
	<section id="systemContainer" class="pok-header-right">
		<div
			v-if="
				((isControlStation.includes(systemTools.value) &&
					userInfo.manage_admin) ||
					!isControlStation.includes(systemTools.value)) &&
				route.path !== '/welcome'
			"
			class="system-tools"
		>
			<!-- <div v-if="guideTip && isShow" class="window-mask"></div> -->
			<!-- <img v-if="guideTip && isShow" class="system-mask" :src="sysToolsMask" /> -->
			<!-- <div
				v-if="guideTip && isShow"
				class="alert-window"
				:style="{ width: engW }"
			>
				<img :src="alertWindow" />
				<p>{{ $t('sysGuide.title', '管控台功能移到这里啦！') }}</p>
				<p>{{ $t('sysGuide.content', '原有管控台已迁移到首页，请悉知') }}</p>
				<button @click="close">{{ $t('iKnow', '我知道了') }}</button>
			</div> -->
			<a-tooltip
				placement="bottom"
				:get-popup-container="systemContainerEl"
				color="#fff"
			>
				<template #title>
					<span style="color: black">{{ systemTools.name }}</span>
				</template>
				<div class="img-container">
					<img
						width="32"
						:src="sysToolsSvg"
						@click="handleToPath(systemTools)"
					/>
				</div>
			</a-tooltip>
		</div>
		<a-dropdown
			placement="bottomLeft"
			:style="{ minWidth: '100px', background: 'pink' }"
			:visible="false || dropdown"
			:trigger="!recordNum ? ['click'] : ['focus']"
			@visible-change="setVisible"
		>
			<div class="rigth-user">
				<ok-avatar
					class="user-layout-avatar"
					.person-info="userInfo"
					width="32px"
					height="32px"
				/>
				<span class="nav-userinfo-name">
					<div>
						<span class="user-name" @click.prevent>{{
							userInfo.employee_name
						}}</span>
						<p
							v-if="isOutsideOrg || tenantDetail.tenant_auth?.user_org_switch"
							class="part"
						>
							<span class="part-name">{{
								isOutsideOrg
									? orgDetail?.department_name
									: orgDetail?.cur_dept?.dept_name
							}}</span>
						</p>
					</div>
					<span
						class="low-code iconxiangyou1 name-icon"
						:class="{ 'hover-icon': isVisible }"
					></span>
				</span>
			</div>
			<template #overlay>
				<a-menu class="nav-userinfo-menu">
					<!-- 项目跳转 -->
					<template v-for="item in handleHeaderList()" :key="item.value">
						<a-tooltip
							v-if="item.value === selectedKeys"
							:key="item.value"
							placement="left"
							arrow-point-at-center
							auto-adjust-overflow
							color="#fff"
							:visible="tooltipFlag"
							:overlay-style="{
								maxWidth: '400px',
							}"
							trigger="foucs"
							overlay-class-name="tooltip-user-card"
							:getPopupContainer="node => node.parentNode"
						>
							<template #title>
								<div class="user-card">
									<img class="user-card-img" :src="Vector" />
									<span class="user-card-title">
										{{
											i18ns.$t('newUserGuide.title', '快速掌握平台使用方式')
										}}
									</span>
									<span class="user-card-content">
										{{
											i18ns.$t(
												'newUserGuide.content',
												'获取海量使用教程，学习如何通过平台快速搭建应用！'
											)
										}}
									</span>
									<a-button type="primary" @click="closeTooltip">{{
										$t('iKnow', '我知道了')
									}}</a-button>
								</div>
							</template>
							<span class="new-user-guide" @click="handleToPath(item)">
								{{ item.name }}
							</span>
						</a-tooltip>
						<a-menu-item
							v-else
							:disabled="tooltipFlag"
							@click="!recordNum && handleToPath(item)"
						>
							<div v-if="item.value === 'version'" class="version">
								<div class="version-info">
									<span class="version-name">{{
										tenantDetail.edition_desc
									}}</span>
								</div>
								<div class="version-expiry">{{ `${expiryTime} 到期` }}</div>
							</div>
							<EllipsisTooltip v-else :title="item.name" :inco="item.inco" />
						</a-menu-item>
					</template>
					<!-- 切换语言 -->
					<template v-if="languageList.length > 1 && route.path !== '/welcome'">
						<a-sub-menu key="sub2">
							<template #icon>
								<i class="iconfont icon-yuyan" />
							</template>
							<template #title>{{ locale }}</template>
							<a-menu-item
								v-for="language in languageList"
								:key="language.value"
								:disabled="tooltipFlag"
								@click="!recordNum && handlerI18nChange(language.value)"
							>
								<span>{{ language.name }}</span>
							</a-menu-item>
						</a-sub-menu>
					</template>
					<a-menu-item @click="handleToPath(logOutItem)">
						<EllipsisTooltip :title="logOutItem.name" :inco="logOutItem.inco" />
					</a-menu-item>
				</a-menu>
			</template>
		</a-dropdown>
		<PopupVideo
			v-if="recordNum && dropdown"
			:dropdown="dropdown"
			:set-dropdown="setDropdown"
		/>
		<PopupVideo
			v-else-if="store.state.showVideo"
			:dropdown="dropdown"
			:set-dropdown="setDropdown"
		/>
		<teleport to="body">
			<slot name="changeOrg"></slot>
			<div v-show="showTip" class="tips-mask">
				<CommunityTip :message="showBindBtn ? msg[0] : msg[1]">
					<template #btn>
						<div v-show="showBindBtn" class="bind-phone">
							<button class="blue-btn" @click="goBindPhone">
								去绑定手机号
							</button>
							<span @click="closeTip">取消</span>
						</div>
						<button v-show="!showBindBtn" class="blue-btn" @click="closeTip">
							关闭
						</button>
					</template>
				</CommunityTip>
			</div>
		</teleport>
		<a-modal
			v-model:visible="layoutStyleModal"
			:centered="true"
			:closable="false"
			@ok="handleOk"
			class="layoutStyleModal"
		>
			<div class="layoutStyleModalTitle">布局风格</div>
			<div
				style="display: flex; margin-top: 40px; justify-content: space-around"
			>
				<div class="compact">
					<img src="@/assets/images/ksfg.png" alt="" />
					<a-radio v-model:checked="compact" @click="radioClick('compact')"
						>紧凑风格</a-radio
					>
				</div>
				<div class="loose">
					<img src="@/assets/images/jcfg.png" alt="" />
					<a-radio
						v-model:checked="comfortable"
						@click="radioClick('comfortable')"
						>宽松风格</a-radio
					>
				</div>
			</div>
		</a-modal>
	</section>
</template>

<script lang="ts">
export default {
	name: 'HeaderRightLayout',
}
</script>
<script setup lang="ts">
import { message } from 'ant-design-vue'
import { ref, watch, watchEffect, onMounted, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { LocaleEnum, useI18n, i18n as i18ns } from '@/locales'
import { apiInit } from '@/services'
import PopupVideo from '@/entry_desktop/components/PopupVideo'
import EllipsisTooltip from '@/entry_desktop/components/EllipsisTooltip'
import CommunityTip from './components/communityTip.vue'
import { client, isEmpty } from '@/utils'
import { headList, systemTools } from './HeadConstant'
import moment from 'moment'
import Vector from '@/assets/images/Vector.png'
import { path } from '@/utils'
import axios from 'axios'
const { $t } = i18ns
const timeAwait = (waitTime: number): Promise<void> =>
	new Promise(res =>
		window.setTimeout(() => {
			res()
		}, waitTime)
	)
const props = defineProps(['isOutsideOrg', 'orgDetail'])
const emits = defineEmits(['showChangeOrg'])
const sysToolsSvg = path.getFullPath('/images/new_system_tools.svg')
const store = useStore()
const i18n = useI18n()
const api = apiInit()
const router = useRouter()
const route = useRoute()
const recordNum = ref(false)
const selectedKeys = ref<string>('')
const guideTip = ref()
const tooltipFlag = ref(false)
const layoutStyleModal = ref(false)
const isShow = ref(true)
const dropdown = ref(false)
const engW = ref()
const showTip = ref(false)
const showBindBtn = ref(false)
const compact = ref(false)
const comfortable = ref(false)
const msg = [
	'请先绑定手机号以注册平台账号，绑定后即可访问',
	'请联系管理员或平台服务人员',
]

const systemContainerEl = () => document.getElementById('systemContainer')

const closeTip = () => {
	document.body.style.overflow = 'scroll'
	showTip.value = false
}
const goBindPhone = () => {
	document.body.style.overflow = 'scroll'
	showTip.value = false
	router.push('/PersonalCenter')
}
const locale = computed(() => {
	let lang = localStorage.getItem('locale')
	switch (lang) {
		case 'zh-CN':
			return '中文'
		case 'en-US':
			return 'English'
		case 'ja-JP':
			return '日本語'
	}
})
const radioClick = (type: string) => {
	if (type === 'compact') {
		compact.value = true
		comfortable.value = false
	} else {
		compact.value = false
		comfortable.value = true
	}
}
const handleOk = async () => {
	let data = await api.baseInfoNew.personalizeSaveByKey({
		config_key: 'pc_default_layout_style',
		config_value: compact.value && !comfortable.value ? '1' : '0',
	})
	if (data.data) {
		message.success('修改成功')
		if (window.BYTELUCK_CHANGE_LAYOUT) {
			window.BYTELUCK_CHANGE_LAYOUT()
		}
		let user
		if (localStorage.getItem('userInfo')) {
			user = JSON.parse(localStorage.getItem('userInfo') || [])
		} else {
			let userData = await api.baseAuto.GetCurrentUserEmployeePrivateV1POST({})
			user = userData.data
		}
		if (localStorage.getItem('byteluck_style_mode')) {
			let mode = JSON.parse(localStorage.getItem('byteluck_style_mode'))
			mode.users[user.employee_id] = {
				layout: compact.value && !comfortable.value ? 'comfort' : 'compact',
			}
			localStorage.setItem('byteluck_style_mode', JSON.stringify(mode))
		} else {
			let mode = {
				
				users: {},
			}
			mode.users[user.employee_id] = {
				layout: compact.value && !comfortable.value ? 'comfort' : 'compact',
			}
			localStorage.setItem('byteluck_style_mode', JSON.stringify(mode))
		}

		layoutStyleModal.value = false
	} else {
		message.error(data.message)
	}
}
const welcomeFilter = ['personalCenter', 'delegation']
const handleHeaderList = () =>
	headList.filter(i => {
		if (
			store.state?.tenant?.tenant_auth?.portal_official_website !== 1 &&
			i.value == 'websiteAccess'
		) {
			return
		} else if (
			store.state?.tenant?.tenant_auth?.portal_user_brochure !== 1 &&
			i.value === 'helpManual'
		) {
			return
		} else if (
			(store.state?.tenant?.tenant_auth?.portal_developer_community !== 1 ||
				!store.state?.userInfo.app_admin) &&
			i.value === 'developerCommunity'
		) {
			return
		} else if (route.path === '/welcome' && i.value === 'personalCenter') {
			return
		} else if (
			(route.path === '/welcome' || props.isOutsideOrg) &&
			i.value === 'delegation'
		) {
			return
		} else if (
			i.value === 'OrganizationChange' &&
			(!tenantDetail.tenant_auth?.user_org_switch || props.isOutsideOrg)
		) {
			return
		} else if ( 
			i.value === 'signOut'
		){
			return
		}
		return i
	})
// 管控台菜单
const isControlStation = ['controlStation', 'version']

// 获取用户信息
let userInfo: Recordable<any> = {}
// 获取租户信息
let tenantDetail: Recordable<any> = {}
// 获取国际化列表
let languageList: Recordable<any>[] = []
// 过期时间
let expiryTime = ''
// 退出登录
const logOutItem = {
		name: $t('menu.navTitle.signOut', '退出登录'),
		value: 'signOut',
		url: process.env.VUE_APP_LOGOUT,
		urlType: 'external',
		inco: 'icon-tuichudenglu',
}

// const addReadList = async () => {
// 	try {
// 		//读取已读列表
// 		const result = await api.baseAuto.ListGuideUserPrivateV1POST({
// 			payload: ['portal1'],
// 		})
// 		// 满足  2022年3月16日之前创建，拥有管控台权限，没有见过此引导提示  的用户会弹出引导提示
// 		guideTip.value =
// 			store.state.tenant.create_time < new Date('2022/3/11 20:00').getTime() &&
// 			store.state.userInfo.sys_admin &&
// 			!result?.data?.[0]?.status
// 		if (guideTip.value) {
// 			document.body.style.overflow = 'hidden'
// 		}
// 		// 存储已读状态
// 		await api.baseAuto.AddGuideUserPrivateV1POST({
// 			payload: ['portal1'],
// 		})
// 	} catch (e) {
// 	}
// }
// onMounted(() => {
// 	addReadList()
// })
const setDropdown = (value: boolean) => {
	dropdown.value = value
}
const newUserRead = async () => {
	//用户手册开关
	const flag = handleHeaderList()?.filter(i => i.value === 'helpManual').length
		? true
		: false
	recordNum.value = flag
	dropdown.value = flag
	selectedKeys.value = flag ? 'helpManual' : ''
	await timeAwait(300)
	tooltipFlag.value = flag
}
watchEffect(() => {
	if (typeof dropdown.value !== 'boolean' && !recordNum.value) {
		newUserRead()
	}
})
// 点击我知道了 关闭引导提示
const close = async () => {
	isShow.value = false
	document.body.style.overflow = 'auto'
}
watch(
	[() => store.state.userInfo, () => store.state.tenant],
	([user, tenant]) => {
		if (!isEmpty(user)) {
			userInfo = user || {}
			tenantDetail = tenant || {}
			expiryTime = tenantDetail?.expiry_time
				? moment(tenantDetail.expiry_time).format('YYYY/MM/DD')
				: ''
			languageList =
				tenantDetail?.language_list?.filter((item: any) => item.has_show) ?? []
		}
	},
	{
		immediate: true,
	}
)
const isVisible = ref(false)
const setVisible = (val: any) => {
	isVisible.value = val
	dropdown.value = !dropdown?.value
}
const closeTooltip = async () => {
	document.body.style.overflow = 'auto'
	dropdown.value = false
	tooltipFlag.value = false
	recordNum.value = false
	selectedKeys.value = ''
	// 等待新手指引过后，提交isShowPwd到store，在Home/index.vue 添加监听事件
	// isShowPwd && 发送请求判断是否展示设置密码弹窗
	store.commit('SET_USER_GUIDE_END', { status: true, isShowPwd: true })
}
// 切换语言
const handlerI18nChange = async (locale: LocaleEnum) => {
	// if (i18n.locale === locale) {
	// 	return
	// }
	await api.default.SetLocalLanguagePrivateV2POST({
		query: {
			localLanguage: locale,
		},
	})
	localStorage.setItem('locale', locale)
	location.reload()
}
// 跳转的项目
const handleToPath = async (item: any) => {
	if (item.value === 'OrganizationChange') {
		emits('showChangeOrg', true)
	}
	if (tooltipFlag.value) {
		closeTooltip()
	}
	if (item.urlType === 'external') {
		sessionStorage.removeItem('userInfo')
		localStorage.removeItem('activeProcessKey')
		if (item.value === 'signOut') {
			history.go(-history.length)
			window.location.replace(item.url)
		} else {
			if (
				store.state?.tenant?.tenant_auth?.baiteda_security_account === 1 ||
				item.value !== 'developerCommunity'
			) {
				if (
					store.state?.centerUser?.user_base_info ||
					item.value !== 'developerCommunity'
				) {
					client.openWindow(item.url)
				} else {
					document.body.style.overflow = 'hidden'
					showBindBtn.value = true
					showTip.value = true
				}
			} else {
				document.body.style.overflow = 'hidden'
				showBindBtn.value = false
				showTip.value = true
			}
		}
	} else {
		closeTooltip()
		router.push({ name: item.url })
	}

	if (item.value !== 'signOut') {
		window.BaiteTrack?.track('enterCoreFunction', {
			provious_page: document.referrer,
			function_name: item.value,
		})
	}
	if (item.value === 'layoutStyle') {
		//获取布局
		let data = await api.baseInfoNew.personalizeConfig()
		let type = data.data.pc_default_layout_style
		// debugger
		// let type = 'comfortable'
		layoutStyleModal.value = true
		if (type === '1') {
			compact.value = true
			comfortable.value = false
		} else {
			compact.value = false
			comfortable.value = true
		}
	}
}
</script>
6]
<style lang="less">
.pok-header-right {
	display: flex;
	justify-content: flex-end;
	align-items: center;

	.system-tools {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80%;
		width: 70px;
		margin-right: 20px;
		border-radius: 8px;
		// background-color: green;
		z-index: 5;

		.img-container {
			padding: 0 20px;
			border-right: 1px solid #e8eaed;

			img {
				&:hover {
					cursor: pointer;
				}
			}
		}

		.window-mask {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			background: rgba(94, 108, 157, 0.5);
		}

		.system-mask {
			width: 87px;
			height: 53px;
			position: absolute;
			transition: all 0.3s ease-out;
			transform-origin: left top;
			z-index: 99;
			transform: scale(0);
			animation: frameSelect 0.2s forwards ease-in;
			// animation-delay: 0.3s;
		}

		.alert-window {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			z-index: 99;
			background-color: #fff;
			top: 70px;
			right: -30px;
			width: 280px;
			padding: 25px 30px;
			box-sizing: border-box;
			transform-origin: top;
			transform: scaleY(0);
			box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
			border-radius: 4px;
			animation: dropDown 0.3s forwards ease-in;
			animation-delay: 0.5s;

			&::before {
				position: absolute;
				top: -8px;
				right: 52px;
				content: '';
				display: block;
				border: 8px solid #fff;
				border-left: 8px solid transparent;
				border-bottom: 8px solid transparent;
				transform: rotate(-45deg);
			}

			img {
				height: 138px;
				width: 153px;
				margin-bottom: 20px;
			}

			p:first-of-type {
				// width: 275px;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 500;
				font-size: 18px;
				line-height: 20px;
				color: #1f2329;
				align-self: flex-start;
				margin-bottom: 10px;
			}

			p:last-of-type {
				font-family: PingFang SC;
				font-style: normal;
				font-weight: normal;
				font-size: 14px;
				line-height: 20px;
				color: #8f959e;
				align-self: flex-start;
				margin-bottom: 20px;
			}

			.eng-p-w {
				width: 275px;
			}

			button {
				padding: 9px 16px;
				align-self: flex-end;
				background: #4c78fc;
				border-radius: 4px;
				font-family: inherit;
				font-style: normal;
				font-weight: 500;
				font-size: 14px;
				line-height: 100%;
				color: #ffffff;
				box-sizing: border-box;
				cursor: pointer;
				border: 0;
			}
		}
	}

	.rigth-user {
		width: auto;
		display: flex;
		align-items: center;
		cursor: pointer;
	}
	.rigth-user {
		.hover-icon {
			transform: rotateZ(-180deg);
		}
	}
	.hover-icon {
		transition: transform 0.2s linear;
	}

	.nav-userinfo-name {
		display: flex;
		align-items: center;
		// flex-direction: column;
		cursor: pointer;
		.part {
			display: flex;
			align-items: center;
			.org-type {
				margin-left: 12px;
				height: 16px;
				max-width: 70px;
				padding: 2px 4px;
				border-radius: 2px;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 12px;
				line-height: 100%;
				color: #ffffff;
				margin-right: 5px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			span {
				display: inline-block;
			}
			.part-name {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 12px;
				line-height: 17px;
				color: #8f959e;
				max-width: 110px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-left: 12px;
			}
		}
		.name-icon {
			font-size: 14px;
			margin-left: 5px;
			color: @rok-text-color-secondary;
		}
	}

	.user-name {
		vertical-align: middle;
		margin-left: 12px;
		cursor: pointer;
		font-size: 14px;
		color: @rok-text-color;
		max-width: 98px;
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

.new-user-guide {
	display: block;
	clear: both;
	color: #1f2329;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	margin: 0;
	padding: 5px 12px;
	white-space: nowrap;
	background: #f5f6f7;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.user-card {
	width: 276px;
	min-height: 328px;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 24px 30px;

	&-img {
		width: 154px;
		height: 138px;
	}

	&-title {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 16px;
		line-height: 20px;
		margin-top: 20px;
		color: #1f2329;
	}

	&-content {
		font-family: PingFang SC;
		line-height: 20px;
		font-weight: normal;
		font-size: 14px;
		margin-top: 12px;
		color: #8f959e;
		white-space: break-spaces;
	}

	.ant-btn-primary {
		background: #4c78fc;
		border-color: #4c78fc;
		border-radius: 4px;
		margin-left: 140px;
		margin-top: 20px;
	}
}

.tooltip-user-card {
	.ant-tooltip-arrow-content {
		width: 10px !important;
		height: 10px !important;
	}
}

.nav-userinfo-menu {
	width: 190px;
	top: 6px;
	.ant-dropdown-menu-item,
	.ant-dropdown-menu-submenu-title {
		padding: 9px 12px !important;
	}

	.ant-dropdown-menu-item:last-of-type {
		border-top: 1px solid @rok-Divider-color;
	}

	.version {
		.version-info {
			margin-bottom: 4px;
			font-size: 12px;
			color: @rok-version-color;
			border-radius: 2px;
			line-height: 1;

			.version-name {
				padding: 4px 8px;
				display: inline-block;
				background: @rok-version-bg;
			}
		}

		.version-expiry {
			font-size: 16px;
			color: @rok-auxiliary-color;
		}
	}
	// .change-org-title {
	// 	font-family: 'PingFang SC';
	// 	font-style: normal;
	// 	font-weight: 500;
	// 	font-size: 16px;
	// 	line-height: 18px;
	// 	color: #1f2329;
	// 	margin-bottom: 14px;
	// }
	// .ant-dropdown-menu-item:nth-child(4):hover{
	// 	.change-org {
	// 		opacity: 1;
	// 		transform: scale(1) !important;
	// 	}
	// }
	.ant-dropdown-menu-item {
		position: relative;
	}
}

@keyframes frameSelect {
	from {
		transform: scale(0);
	}

	to {
		transform: scale(1);
	}
}

@keyframes dropDown {
	from {
		transform: scaleY(0);
		opacity: 0;
	}

	to {
		transform: scaleY(1);
		opacity: 1;
	}
}
.tips-mask {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1051;
	height: 100vh;
	width: 100vw;
	background: rgba(94, 108, 157, 0.5);
}
.bind-phone {
	.blue-btn {
		margin-bottom: 15px;
	}
	span {
		display: block;
		width: 35px;
		height: 20px;
		margin: 0 auto;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
		color: #8f959e;
		cursor: pointer;
		&:hover {
			text-decoration: underline;
		}
	}
}
.blue-btn {
	width: 311px;
	height: 48px;
	background: #4c78fc;
	border-radius: 8px;
	font-family: 'PingFang SC';
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	color: #ffffff;
	border: 0;
	cursor: pointer;
	&:hover {
		background: #658bfc;
	}
	&:active {
		background: #466feb;
	}
}
.layoutStyleModal {
	.compact,
	.loose {
		display: flex;
		flex-direction: column;
		align-items: center;
		.ant-radio-wrapper {
			margin-top: 7px;
		}
	}
	.layoutStyleModalTitle {
		font-family: PingFang SC;
		font-size: 18px;
		font-weight: 500;
		line-height: 26px;
	}
	.ant-modal-footer button:first-child {
		display: none;
	}
}
</style>
